<template>
   <div class="person">
    <h2>情况五:监视多个数据</h2>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h2>
    <button @click="changName">修改姓名</button>
    <button @click="changAge">修改年龄</button>
    <button @click="changC1">修改第一台车</button>
    <button @click="changC2">修改第二台车</button>
    <button @click="changCar">修改整台车</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { reactive,watch } from 'vue'
    // 数据
    let person = reactive({
        name:'张三',
        age:18,
        car:{
            c1:'奔驰',
            c2:'宝马'
        }
    })
    // 方法
    function changName(){
        person.name += '~'
    }
    function changAge(){
        person.age+=1
    }
    function changC1(){
        person.car.c1 = '奥迪'
    }
    function changC2(){
        person.car.c2 = '大众'
    }
    function changCar(){
        person.car = {
            c1:'雅迪',
            c2:'爱马'
        }
    }
    // 情况五:监视多了数据
    watch([()=>person.name,()=>person.car.c1],(newValue,oldValue)=>{
        console.log('person改变了',newValue,oldValue)
    },{deep:true})
   
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>